<div class="row content">
    <div class="list-container">
        <div class="condition">
            <form #searchForm="ngForm" (submit)="searchMembers()">
                    <div class="row">
                        <div class="col">
                            <input type="text"
                            class="form-control my-1" 
                            #uclassName="ngModel" 
                            name="className" 
                            [(ngModel)]="search.name" 
                            placeholder="学员姓名">
                        </div>
                        <!-- <div class="col">
                            <select 
                            class="custom-select my-1 mr-sm-2" 
                            >
                                <option selected>请选择学期...</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                   if (confirm('确认删除么?')) {
            this.memberService.removeMember(item).subscribe(res => {
                if (!res.errors) {
                    alert('删除成功');
                    this.getMembers(this.search);
                } else {
                    alert('删除失败！');
                }
            });
        }              <option value="3">Three</option>
                            </select>
                        </div> -->
                        <div class="col"> 
                            <button 
                            type="submit"
                            [disabled]="!searchForm.form.valid"
                            class="btn btn-primary my-1">搜索</button> 
                        </div>
                        <!-- <div class="col"> 
                            <button (click)="openShowAddMemberModal()" type="button" class="btn btn-primary my-1">新增学员</button> 
                        </div> -->
                    </div>
            </form>
        </div>
        <div class="list">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">ID</th>
                        <th scope="col">姓名</th>
                        <th scope="col">电话</th>
                        <th scope="col">年龄</th>
                        <th scope="col">所在班级</th>
                        <th scope="col">所属会籍</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">最后跟新时间</th>                        
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody *ngIf="members">
                    <tr *ngFor="let item of members;index as i; trackBy: trackByFn"  >
                        <td>{{ i+1 }}</td>
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }} </td>
                        <td>{{ item.phone }} </td>
                        <td>{{ item.age }} </td>
                        <td>
                            <div *ngIf="item.class_member">
                                <div *ngFor="let classItem of item.class_member;">
                                    <span *ngIf="classItem.classEntity">
                                            {{ classItem.classEntity.term.name }} -- {{ classItem.classEntity.name }} -- {{ classItem.classEntity.start_end }}                                        
                                    </span>
                                </div>
                            </div>
                                
                        </td>
                        <td>{{ item.saler }} </td>                        
                        <td>{{ item.created_at }} </td>                        
                        <td>{{ item.updated_at }} </td>                        
                        <td>
                            <button (click)="openEditMembersModal(editTemplate,item)" class="btn btn-primary btn-sm" type="button">编辑</button>
                            <button (click)="removeMember(item)" class="btn btn-primary btn-sm">删除学员 </button>
                            <button (click)="openResetMembersModal(resetMemberTemplate, item, i)" class="btn btn-primary btn-sm" type="button">重新排班</button>
                            
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <pagination 
            *ngIf="page"
            [totalItems]="page.total" 
            [(ngModel)]="page.currentPage" 
            [itemsPerPage]="page.perPage"
            (pageChanged)="pageChanged($event)"
            class="pagination-sm right"
            [maxSize]="maxSize"
            [rotate]="rotate" 
            [boundaryLinks]='true'
            previousText="&lsaquo;" 
            nextText="&rsaquo;" 
            firstText="&laquo;" 
            lastText="&raquo;"></pagination>


    </div>



    <ng-template #editTemplate>
            <div class="modal-header">
                    <h4 class="modal-title pull-left">编辑学员</h4>
                    <button type="button" class="close pull-right" aria-label="Close" (click)="closeEditMemberModal()">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
              
                  <div class="modal-body">
                    <form #addForm="ngForm" (submit)="editMemberItem(addForm.value)">
                      <div class="form-group row">
                          <label for="name" class="col-sm-3 col-form-label">会员名称</label>
                          <div class="col-sm-9">
                              <input type="text"
                              *ngIf="member"
                              required
                              class="form-control"
                              name="name"
                              [(ngModel)]="member.name"
                              placeholder="会员名称"
                              #uname="ngModel"
                              >
                          </div>
                      </div>
                      <div class="form-group row">
                          <label for="phone" class="col-sm-3 col-form-label">联系电话</label>
                          <div class="col-sm-9">
                              <input type="text"
                              *ngIf="member"
                              required
                              class="form-control"
                              name="phone"
                              [(ngModel)]="member.phone"
                              placeholder="联系电话"
                              #uphone="ngModel"
                              >
                          </div>
                      </div>
                      <div class="form-group row">
                          <label for="age" class="col-sm-3 col-form-label">年龄</label>
                          <div class="col-sm-9">
                              <input type="number"
                              *ngIf="member"
                              required
                              class="form-control"
                              name="age"
                              [(ngModel)]="member.age"
                              placeholder="年龄请输入数字"
                              #uage="ngModel"
                              >
                          </div>
                      </div>
                      <div class="form-group row">
                        <label for="saler" class="col-sm-3 col-form-label">会籍
                        </label>
                        <div class="col-sm-9">
                            <input type="text"
                            *ngIf="member"
                            required
                            class="form-control"
                            name="saler"
                            [(ngModel)]="member.saler"
                            placeholder="请输入会籍(销售员)"
                            #uage="ngModel"
                            >
                        </div>
                    </div>
                      
                      <div class="form-group row">
                          <div class="col-sm-2">
                              <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                          </div>
                      </div>
                    </form>
                  </div>
              
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" (click)="closeEditMemberModal()">关闭</button>
                  </div>
    </ng-template>

    <!-- 重新排班页面模板 -->
    <ng-template #resetMemberTemplate>
        <div class="modal-header">
            <h4 class="modal-title pull-left">学员重新排班--<strong>{{member.name}}</strong></h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="closeResetMemberModal()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
      
          <div class="modal-body">
            <h1 class="col-sm-12">当前班级</h1>            
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">所在班级</th>
                        <th scope="col">学期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody >
                    <tr *ngFor="let item of member.class_member;index as i">
                        <td>{{ i+1 }}</td>
                        <td>{{ item.classEntity.name }} </td>
                        <td>{{ item.classEntity.term.name }} </td>
                        <td>
                            <button (click)="removeMemberFromClass(item)" class="btn btn-primary btn-sm">移除该学员 </button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <form #addForm="ngForm" (submit)="resetMemberItem(addForm.value)">            
                <div class="form-group row">
                    <h1 class="col-sm-12">排入下面班级</h1>
                </div>
                <div class="form-group row">
                    <label for="age" class="col-sm-3 col-form-label">学期</label>
                    <div class="col-sm-9">
                        <select
                        required
                        class="form-control"
                        name="term_id"
                        [(ngModel)]="member_term_id"
                        #uterm_id="ngModel"
                        (change)="geAllClassEntitiesByTerm()"
                        >
                            <option>请选择学期</option>
                            <option
                                *ngFor="let item of allTerms"
                                value="{{item.id}}"
                            >{{ item.name }}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="age" class="col-sm-3 col-form-label">时间</label>
                    <div class="col-sm-4">
                        <input type="number"
                        required
                        class="form-control"
                        name="member_start_time"
                        [(ngModel)]="member_start_time"
                        placeholder="开始时间"
                        (change)="geAllClassEntitiesByTerm()"                    
                        #umemberStartTime="ngModel"
                        >
                    </div>
                    <div class="col-sm-1"></div>
                    <div class="col-sm-4">
                        <input type="number"
                        required
                        class="form-control"
                        name="member_end_time"
                        [(ngModel)]="member_end_time"
                        placeholder="结束时间"
                        (change)="geAllClassEntitiesByTerm()"                    
                        #umemberEndTime="ngModel"
                        >
                    </div>
                </div>
    
                <div class="form-group row">
                    <label for="age" class="col-sm-3 col-form-label">班级</label>
                    <div class="col-sm-9">
                        <select
                        required
                        class="form-control"
                        name="member_class_id"
                        [(ngModel)]="member_class_id"
                        #umemberClassId="ngModel"
                        >
                            <option>请选择班级</option>
                            <option
                                *ngFor="let item of allClassEntities"
                                value="{{item.id}}"
                            >{{ item.name }}</option>
                        </select>
                    </div>
                </div>
        
                <div class="form-group row">
                    <div class="col-sm-2">
                        <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                    </div>
                </div>
            </form>
          </div>
      
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="closeResetMemberModal()">关闭</button>
          </div>
    </ng-template>
</div>
  